<template>
  <div class="con-cate-chart-div"
       ref="contentCateChartDiv"
       id="contentCateChartDiv"></div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  // import pieEchartsOption from '@/utils/echarts/pie.js' // 引用统计图样式
  let echarts = require('echarts/lib/echarts')
  export default {
    data () {
      return {

      }
    },
    created () {
      this.getContentCateCharts()
    },
    methods: {
      // 工单类别统计
      getContentCateCharts () {
        this.conCateDivLoading = true
        this.$axios.post(this.$api.homeCharts.contentCateCharts).then(rs => {
          if (rs) {
            this.contentCateData = rs
            this.conCateDivLoading = false
            // 基于准备好的dom，初始化echarts实例
            this.$nextTick(() => {
              let myChart = echarts.init(this.$refs.contentCateChartDiv)
              if (!myChart) return
              // console.log(123123);

              // 绘制图表
              myChart.setOption({
                title: {
                  text: this.$moment().format('YYYY') + '年工单类别Top5',
                  x: 'center'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  top: '32px',
                  bottom: '36px',
                  left: '132px',
                  right: '99px',
                  containLabel: false
                },
                calculable: false,
                xAxis: {
                  type: 'value',
                  name: '数量(件)',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                },
                yAxis: {
                  type: 'category',
                  data: this.contentCateData.name.split(',').reverse(),
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0, // 全部显示
                    clickable: false, // 可点击
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  }
                },
                series: [
                  {
                    name: '工单类别',
                    type: 'bar',
                    data: this.contentCateData.value.split(',').reverse(),
                    barCategoryGap: '50%',
                    itemStyle: {
                      normal: {
                        color: '#5AB1EF',
                        label: {
                          show: true,
                          position: 'right',
                          fontSize: 14 // 让字体变大
                        }
                      }
                    }
                  }
                ]
              })
            })
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .con-cate-chart-div {
    width: 100%;
    height: 360px;
    padding-top: 20px;
  }
</style>
